
import React,{
    useState,
    useLayoutEffect
} from "react";
//    useEffect,

const TestUseLayoutEffect = ()=>{


    /*
    * 执行时机不一样
    * useLayoutEffect：
    *   等dom修改完之后执行
    * useEffect：
    *   和dom同步执行
    *
    * 一般情况下 一律用 useEffect
    * */

    const [num,setNum] = useState(0);

    useLayoutEffect(()=>{

        const ctr = Date.now();

        while (Date.now() - ctr < 500){}

        if(num===0){
            setNum(100 * Math.random() * 1000);
        }

    },[num])
    return (
        <div>
            {num}
            <br/>
            <button onClick={()=>setNum(0)}>点我</button>
        </div>
    );
}

export default TestUseLayoutEffect